<template>
  <div class="home">
    <Article
      v-for="article in articles"
      :key="article.id"
      :article="article"
      @tap="toArticle(article.id)"
    />
  </div>
</template>

<script>
  import Article from '../../components/Article';

  export default {
    name: 'Home',
    components: { Article },
    data() {
      return {
        articles: []
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      toArticle(id) {
        this.$router.push({
          path: '/article',
          query: {
            id
          }
        });
      },
      async init() {
        this.articles = await this.$request('/article/list');
      }
    }
  };
</script>
